<template>
  <page-header-wrapper :content="$t('message.servlet.about')">
    <!-- extra for heading -->
    <div class="extra-content" slot="extraContent">
      <a-button size="small" @click="openSearchForm">
        <a-icon type="search" />
        {{ $t('action.search') }}
      </a-button>
      <a-button size="small" type="primary" @click="openPublishForm">
        <a-icon type="plus" />
        {{ $t('action.publish') }}
      </a-button>
    </div>

    <!-- drawer for publish -->
    <a-drawer width="650" :title="$t('message.servlet.publish')" :visible="publishFormVisible" @close="closePublishForm">
      <PublishServlets :origin="publishFormOrigin" @update:submit="submitPublishForm" @update:close="closePublishForm" />
    </a-drawer>

    <!-- drawer for search -->
    <a-drawer width="650" :title="$t('message.servlet.search')" :visible="searchFormVisible" @close="closeSearchForm">
      <SearchServlets :origin="searchFormOrigin" @update:submit="submitSearchForm" @update:close="closeSearchForm" />
    </a-drawer>

    <!-- drawer for detail -->
    <a-drawer width="650" :title="$t('message.servlet.detail')" :visible="detailVisible" @close="closeDetail">
      <DetailServlets :origin="detailOrigin" @update:close="closeDetail" />
    </a-drawer>

    <!-- message list -->
    <a-table
      rowKey="id"
      :columns="listColumns"
      :data-source="listData"
      :loading="listLoading"
      :pagination="listPagination"
      @change="loadPage"
    >
      <div slot="status" slot-scope="item">
        <div v-if="item.status === 0"><span class="status-created"><a-icon type="tag" />{{ $t('message.status.created') }}</span></div>
        <div v-if="item.status === 1"><span class="status-enabled"><a-icon type="check" /> {{ $t('message.status.succeed') }}</span></div>
        <div v-if="item.status === 2"><span class="status-failed"><a-icon type="warning" /> {{ $t('message.status.failed') }}</span></div>
        <div v-if="item.status === 3"><span class="status-waiting"><a-icon type="calendar" />{{ $t('message.status.waiting') }}</span></div>
        <div v-if="item.status === 4"><span class="status-processing"><a-icon type="tool" />{{ $t('message.status.processing') }}</span></div>
        <div v-if="item.status === 5"><span class="status-ignored"><a-icon type="lock" />{{ $t('message.status.ignored') }}</span></div>
      </div>
      <div slot="action" slot-scope="item" class="action-list">
        <a @click="openDetail(item)">{{ $t('action.detail') }}</a>
      </div>
    </a-table>
  </page-header-wrapper>
</template>

<script>
import { getServletPaging } from '@/api/v1'
import DetailServlets from './Detail'
import PublishServlets from './Publish'
import SearchServlets from './Search'

export default {
  components: { DetailServlets, PublishServlets, SearchServlets },
  computed: { params () { return this.$route.query } },
  created () {
    const p = this.params

    // Use topic from query string.
    if (p.title !== null && p.title !== '') {
      this.listConditions.topic = p.topic
      this.publishFormOrigin.topic = p.topic
      this.searchFormOrigin.topic = p.topic
    }
    // Use tag from query string.
    if (p.tag !== null && p.tag !== '') {
      this.listConditions.tag = p.tag
      this.publishFormOrigin.tag = p.tag
      this.searchFormOrigin.tag = p.tag
    }
    // Use status from query string.
    if (p.status !== null && p.status !== '') {
      this.listConditions.status = p.status
      this.searchFormOrigin.status = p.status
    }
    // Use message id from query string.
    if (p.message_id !== null && p.message_id !== '') {
      this.listConditions.message_id = p.message_id
      this.searchFormOrigin.message_id = p.message_id
    }
    // Use hash from query string.
    if (p.hash !== null && p.hash !== '') {
      this.listConditions.hash = p.hash
      this.searchFormOrigin.hash = p.hash
    }
    // Load immediately.
    this.loadPaging()
  },
  data () {
    return {
      detailOrigin: {},
      detailVisible: false,
      listColumns: [
        { key: 'id', title: '#', dataIndex: 'id' },
        { key: 'status', title: this.$t('message.status'), scopedSlots: { customRender: 'status' } },
        { key: 'message_time', title: this.$t('message.time'), dataIndex: 'message_time' },
        { key: 'topic', title: this.$t('task.topic'), dataIndex: 'topic' },
        { key: 'tag', title: this.$t('task.tag'), dataIndex: 'tag' },
        { key: 'message_id', title: this.$t('message.id'), dataIndex: 'message_id' },
        { key: 'action', scopedSlots: { customRender: 'action' } }
      ],
      listData: [],
      listConditions: { topic: '', tag: '', status: '', hash: '', message_id: '', page: 1, size: 25 },
      listLoading: false,
      listPagination: { current: 0, pageSize: 0, total: 0 },
      publishFormOrigin: { topic: '', tag: '', message: '', delay_seconds: 0 },
      publishFormVisible: false,
      searchFormOrigin: { topic: '', tag: '', status: '', hash: '', message_id: '' },
      searchFormVisible: false
    }
  },
  methods: {
    loadPage (v) {
      this.listPagination = v
      this.listConditions.page = this.listPagination.current
      this.listConditions.size = this.listPagination.pageSize
      this.loadPaging()
    },
    async loadPaging () {
      this.listLoading = true
      getServletPaging(this.listConditions, (res) => {
        // Fill with response list.
        this.listData = res.data.body
        // Fill pagination.
        this.listPagination.current = res.data.paging.curr
        this.listPagination.pageSize = res.data.paging.size
        this.listPagination.total = res.data.paging.total
        // Condition filters.
        this.listConditions.page = this.listPagination.current
        this.listConditions.size = this.listPagination.pageSize
      }, () => {}, () => {
        this.listLoading = false
      })
    },

    closeDetail () { this.detailVisible = false },
    openDetail (item) { this.detailOrigin = item; this.detailVisible = true },

    closePublishForm () { this.publishFormVisible = false },
    openPublishForm () { this.publishFormVisible = true },
    submitPublishForm () { this.closePublishForm(); this.loadPaging() },

    closeSearchForm () { this.searchFormVisible = false },
    openSearchForm () { this.searchFormVisible = true },
    submitSearchForm (v) {
      this.listConditions.topic = v.topic
      this.listConditions.tag = v.tag
      this.listConditions.status = v.status
      this.listConditions.hash = v.hash
      this.listConditions.message_id = v.message_id
      this.publishFormOrigin.topic = v.topic
      this.publishFormOrigin.tag = v.tag
      this.loadPaging()
    }
  }
}
</script>
